<style>
    .difftxt {
        width: auto;
        padding: 6px;
        height: 38px !important;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <label class="btn btn-secondary float-left">
                <input type="file" class="d-none" id="fileOrigin" />选择原始文件（只读）
            </label>
            <textarea class="form-control difftxt" id="txtOrigin" placeholder="或 粘贴内容"></textarea>
        </div>
        <div class="col-md-5">
            <label class="btn btn-warning float-left">
                <input type="file" class="d-none" id="fileVary" />选择变动文件（可编辑）
            </label>
            <textarea class="form-control difftxt" id="txtVary" placeholder="或 粘贴内容"></textarea>
        </div>
        <div class="col-md-2">
            <label class="m-0">
                <input type="checkbox" id="chkDiffMode" /> 内联对比
            </label>
            <br />
            <label class="text-muted m-0">可拖拽打开文件</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="editor" class="border"></div>
        </div>
    </div>
</div>

@Html.Raw(Netnr.SharedApp.QuoteTo.Html("monaco-editor"))

<script>
    var editor, originContent = '', varyContent = '';

    $('#chkDiffMode').click(changeDiffMode);
    function changeDiffMode() {
        if (editor) {
            editor.updateOptions({
                renderSideBySide: !$('#chkDiffMode').is(':checked')
            });
        }
    }
    function createDiffEditor(text1, text2) {
        $('#editor').empty();
        require(['vs/editor/editor.main'], function () {
            var originalModel = monaco.editor.createModel(text1 || "", "text/plain");
            var modifiedModel = monaco.editor.createModel(text2 || "", "text/plain");
            editor = monaco.editor.createDiffEditor(document.getElementById("editor"), ss.meConfig());
            editor.setModel({
                original: originalModel,
                modified: modifiedModel
            });
            changeDiffMode();
        });
    }
    $('#fileOrigin').change(function () {
        if (this.files.length) {
            var reader = new FileReader();
            reader.onload = function () {
                createDiffEditor(originContent = this.result, varyContent);
            };
            reader.readAsText(this.files[0]);
        }
    });
    $('#txtOrigin').on('input', function () {
        createDiffEditor(originContent = this.value, varyContent);
    });
    $('#fileVary').change(function () {
        if (this.files.length) {
            var reader = new FileReader();
            reader.onload = function () {
                createDiffEditor(originContent, varyContent = this.result);
            };
            reader.readAsText(this.files[0]);
        }
    });
    $('#txtVary').on('input', function () {
        createDiffEditor(originContent, varyContent = this.value);
    });

    function AutoHeight() {
        var ch = $(window).height() - $('#editor').offset().top - 15;
        $('#editor').css('height', Math.max(200, ch));
    }
    $(window).on('load resize', AutoHeight);

    //接收文件
    ss.receiveFiles(function (files) {
        jz.popup({
            title: "请选择文件打开到？",
            okValue: "变动文件（可编辑）",
            cancelValue: "原始文件（只读）",
            drag: true,
            //变动（右）
            ok: function () {
                var file = files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    createDiffEditor(originContent, varyContent = e.target.result);
                    $('#txtVary').val(varyContent)
                };
                reader.readAsText(file);
            },
            //原始（左）
            cancel: function () {
                var file = files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    createDiffEditor(originContent = e.target.result, varyContent);
                    $('#txtOrigin').val(originContent)
                };
                reader.readAsText(file);
            }
        })
    });
</script>